<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:ui="http://java.sun.com/jsf/facelets"
         xmlns:h="http://java.sun.com/jsf/html"
         xmlns:f="http://java.sun.com/jsf/core"
         xmlns:p="http://primefaces.org/ui">
    <h:head>
       <title> insert title here </title>
    </h:head>
    <h:body>
       <ui:composition template="/templates/khungchinh.xhtml">
		<ui:define name="tieudetrang">
            Chi Tiết Hóa Đơn
         </ui:define>
		<ui:define name="javascrip">
			<h:outputScript library="javascrip" name="muahang.js" />
		</ui:define>
		<ui:define name="phandau">
			<div class="daude">Trang Quản Trị</div>
		</ui:define>
		<ui:define name="noidung">
		<h:form id="form">
		<div id="dssphd">
			<p:dataTable  value="#{beanHoaDon.spdm}" var="sanpham"
					rowKey="#{sanpham.ten}" paginator="true" rows="10"
					rowsPerPageTemplate="10,15,20,25"  
                selection="#{beanHoaDon.selectedSanPham}" selectionMode="single" 
                id="bangsanpham" styleClass="datatable">  
  
  <p:ajax event="rowSelect" update=":form:display" oncomplete="sanphamDialog.show()" >
  </p:ajax>
        <f:facet name="header">  
            <h:outputText value="Danh Sách Sản Phẩm"></h:outputText>  
        </f:facet>  
  
        <p:column headerText="Tên Sản Phẩm" filterBy="#{sanpham.ten}" sortBy="#{sanpham.ten}" id="tensanpham">  
            #{sanpham.ten}  
        </p:column>  
  
        <p:column headerText="Hãng" filterBy="#{sanpham.nhasanxuat.tennhasanxuat}" sortBy="#{sanpham.nhasanxuat.tennhasanxuat}" id="nhasanxuat">  
            #{sanpham.nhasanxuat.tennhasanxuat}  
        </p:column>  
  
        <p:column headerText="Giá" filterBy="#{sanpham.gia}" sortBy="#{sanpham.gia}" id="gia">  
            <h:outputText value="#{sanpham.gia}">
            <f:convertNumber pattern="###,###,### VND"></f:convertNumber>
            </h:outputText>
        </p:column>
           
    	<p:column headerText="Số Lượng" filterBy="#{beanHoaDon.soluong(sanpham)}" sortBy="#{beanHoaDon.soluong(sanpham)}" id="soluong">  
            <h:outputText value="#{beanHoaDon.soluong(sanpham)}"></h:outputText>
        </p:column>
        <p:column headerText="Thành Tiền" filterBy="#{beanHoaDon.thanhtien(sanpham)}" sortBy="#{beanHoaDon.thanhtien(sanpham)}" id="thanhtien">  
            <h:outputText value="#{beanHoaDon.thanhtien(sanpham)}">
            <f:convertNumber pattern="###,###,### VND"></f:convertNumber>
            </h:outputText>
        </p:column>
    </p:dataTable>  
    </div>
    <div id="footercthd">
                <h:outputText value="Tổng Tiền: "></h:outputText>
                <h:outputText id="tongtien" value="#{beanHoaDon.selectedHoaDon.tongtien}" style="font-weight: bold;">
                <f:convertNumber pattern="###,###,### VND"></f:convertNumber>
                </h:outputText>
                <br />
                <h:outputText value="Đã Thanh Toán: "></h:outputText>
                <p:selectBooleanCheckbox label="Đã Thanh Toán"
                 value="#{beanHoaDon.selectedHoaDon.dathanhtoan}">
                <p:ajax listener="#{beanHoaDon.suahoadon(beanHoaDon.selectedHoaDon)}"></p:ajax>
                </p:selectBooleanCheckbox>
                <br></br>
               	<h:commandLink  action="#{beanHoaDon.xoahoadonchitiet(beanHoaDon.selectedHoaDon)}">
                <p:button value="Xóa" styleClass="buttongiohang"></p:button>
                </h:commandLink>
                
                <h:commandLink action="quanlyhoadon">
                <p:button value="Quay Lại" styleClass="buttongiohang"></p:button>
                </h:commandLink>
                
    	</div>
    <p:dialog header="Chi Tiết Sản Phẩm" widgetVar="sanphamDialog" resizable="false"  
              width="400" showEffect="explode" hideEffect="explode">
                
        <h:panelGrid id="display" columns="2" cellpadding="4" styleClass="tooltip">  
  
            <f:facet name="header">  
                <p:graphicImage value="/resources/images/hinhsanpham/#{beanHoaDon.selectedSanPham.hinh}"/>  
            </f:facet>  
            
  			<h:outputText value="Tên:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanHoaDon.selectedSanPham.ten}" id="ten"/>
            
            <h:outputText value="Giá:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanHoaDon.selectedSanPham.gia}" id="gia">
            <f:convertNumber pattern="###,###,### VND"></f:convertNumber>
            </h:outputText>  
  
            <h:outputText value="Hãng:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanHoaDon.selectedSanPham.nhasanxuat.tennhasanxuat}" id="hang"/>  
  
            <h:outputText value="Bảo Hành:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanHoaDon.selectedSanPham.baoHanh}" id="baohanh"/>
            
            <h:outputText value="CPU:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanHoaDon.selectedSanPham.cpu}" id="cpu"/>  
            
            <h:outputText value="Ram:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanHoaDon.selectedSanPham.ram}" id="ram"/>
            
            <h:outputText value="HDD:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanHoaDon.selectedSanPham.hdd}" id="hdd"/>
            
            <h:outputText value="Màn Hình:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanHoaDon.selectedSanPham.manHinh}" id="manhinh"/>
            
            <h:outputText value="Đồ Họa:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanHoaDon.selectedSanPham.doHoa}" id="dohoa"/>
            
            <h:outputText value="Ổ Đĩa:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanHoaDon.selectedSanPham.oDia}" id="odia"/>
            
            <h:outputText value="Wifi:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanHoaDon.selectedSanPham.wifi}" id="wifi"/>
            
            <h:outputText value="Webcam:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanHoaDon.selectedSanPham.webcam}" id="webcam"/>
            
            <h:outputText value="Pin:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanHoaDon.selectedSanPham.pin}" id="pin"/>
            
            <h:outputText value="Hệ Điều Hành:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanHoaDon.selectedSanPham.hdh}" id="hdh"/>
        </h:panelGrid>  
    </p:dialog> 
				</h:form>
				
		</ui:define>
	</ui:composition>
    </h:body>
 </html>